<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图表统计</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./libs/layui-v2.6.5/layui/css/layui.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./libs/echarts.js"></script>
    <script src="./js/public.js"></script>
    <script src="./js/main_count.js"></script>
    <script src="./libs/layui-v2.6.5/layui/layui.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="row spannel_list">
            <div class="col-sm-3 col-xs-6">
                <div class="spannel">
                    <em>10015</em><span>篇</span>
                    <b>总文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor01">
                    <em>123</em><span>篇</span>
                    <b>日新增文章数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor02">
                    <em>35</em><span>条</span>
                    <b>评论总数</b>
                </div>
            </div>
            <div class="col-sm-3 col-xs-6">
                <div class="spannel scolor03">
                    <em>123</em><span>条</span>
                    <b>日新增评论数</b>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row curve-pie">
            <div class="col-lg-8 col-md-8">
                <div class="gragh_pannel" id="curve_show"></div>
            </div>
            <div class="col-lg-4 col-md-4">
                <div class="gragh_pannel" id="pie_show"></div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="column_pannel" id="column_show"></div>
    </div>


    <!-- 折线图 -->
<script>
    //  var json = '{"code":200,"msg":"获取成功","date":[{"date":"2019-05-20","count":23},{"date":"2019-05-21","count":19},{"date":"2019-05-22","count":29},{"date":"2019-05-23","count":24},{"date":"2019-05-24","count":28},{"date":"2019-05-25","count":28},{"date":"2019-05-26","count":19},{"date":"2019-05-27","count":25},{"date":"2019-05-28","count":25}]}';
    //     var obj = JSON.parse(json);
    //     loadEchars(obj);
      
    //     function loadEchars(obj) {
    //         // 基于准备好的dom，初始化echarts实例
    //         var myChart = echarts.init(document.getElementById('curve_show'));

    //         var data = [];
    //         var date = [];
    //         for (var i = 0; i < obj.date.length; i++) {
    //             data.push(obj.date[i].count);
    //             date.push(obj.date[i].date);
    //         }

    //         option = {
    //             tooltip: {
    //                 trigger: 'axis',
    //                 position: function (pt) {
    //                     return [pt[0], '10%'];
    //                 }
    //             },
    //             title: {
    //                 left: 'center',
    //                 text: '月新增文章数',
    //             },

    //             xAxis: {
    //                 name: '日',
    //                 type: 'category',
    //                 boundaryGap: false,
    //                 data: date
    //             },
    //             legend: {
    //                 data: ['新增文章'],
    //                 top: '40'
    //             },
    //             toolbox: {
    //                 show: true,
    //                 feature: {
    //                     dataZoom: {
    //                         yAxisIndex: 'none'
    //                     },
    //                     dataView: { readOnly: false },
    //                     magicType: { type: ['line', 'bar'] },
    //                     restore: {},
    //                     saveAsImage: {}
    //                 },
    //                 right: 50
    //             },
    //             yAxis: {
    //                 type: 'value',
    //                 boundaryGap: [0, '100%']
    //             },
    //             series: [
    //                 {
    //                     name: '新增文章',
    //                     type: 'line',
    //                     smooth: true,
    //                     // symbol: 'none',
    //                     sampling: 'average',
    //                     itemStyle: {
    //                         color: '#f80'
    //                     },
    //                     areaStyle: {
    //                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    //                             offset: 0,
    //                             color: 'rgba(255,136,0,0.39)'
    //                         }, {
    //                             offset: .34,
    //                             color: 'rgba(255,180,0,0.25)'
    //                         },
    //                         {
    //                             offset: 1,
    //                             color: 'rgba(255,222,0,0.00)'
    //                         }])
    //                     },
    //                     data: data
    //                 }
    //             ],
    //         }
    //         // 使用刚指定的配置项和数据显示图表。
    //         myChart.setOption(option);
    //     }
</script>
    <!-- 环形图 -->
    <script>
        // // 基于准备好的dom，初始化echarts实例
        // var myChart1 = echarts.init(document.getElementById('pie_show'));
        // let data=[{ value: 335, name: '爱星星' },{ value: 310, name: '趣哈哈' },{ value: 234, name: '爱呵呵' },{ value: 135, name: '爱谢谢' },{ value: 548, name: '爱嘻嘻' }]
        
        // option1 = {
        //     title: {
        //         left: 'center',
        //         text: '分类文章数量比',
        //     },
        //     tooltip: {
        //         trigger: 'item',
        //         formatter: "{a} <br/>{b}: {c} ({d}%)"
        //     },
        //     legend: {
        //         orient: 'horizontal',
        //         x: 'center',
        //         data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
        //         top: 30
        //     },
        //     color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
        //     series: [
        //         {
        //             name: '分类名称',
        //             type: 'pie',
        //             radius: ['50%', '70%'],
        //             avoidLabelOverlap: false,
        //             label: {
        //                 emphasis: {
        //                     show: true,
        //                     textStyle: {
        //                         fontSize: '30',
        //                         fontWeight: 'bold'
        //                     }
        //                 }
        //             },
        //             data: data
        //         }
        //     ]
        // };
        // // 使用刚指定的配置项和数据显示图表。
        // myChart1.setOption(option1);
    </script>
    <!-- 柱状图 -->
    <script>
        // 基于准备好的dom，初始化echarts实例
        // var myChart2 = echarts.init(document.getElementById('column_show'));

        // option2 = {
        //     title: {
        //         left: 'center',
        //         text: '分类访问量',
        //     },
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        //             type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
        //         },
                
        //     },
        //     legend: {
        //         data: ['爱生活', '趣美味', '爱旅行', '爱电影', '爱游泳'],
        //         top:30
        //     },
        //     grid: {
        //         left: '3%',
        //         right: '4%',
        //         bottom: '3%',
        //         containLabel: true
        //     },
        //     xAxis: [
        //         {
        //             type: 'category',
        //             data: ['一月', '二月', '三月', '四月']
        //         }
        //     ],
        //     yAxis: [
        //         {
        //             type: 'value'
        //         }
        //     ],
        //     color: ['#5885e8', '#13cfd5', '#00ce68', '#ff9565', '#20ff19'],
        //     series: [
        //         {
        //             name: '爱生活',
        //             type: 'bar',
        //             data: [320, 332, 301, 334]
        //         },
        //         {
        //             name: '趣美味',
        //             type: 'bar',
        //             data: [220, 132, 101, 134]
        //         },
        //         {
        //             name: '爱旅行',
        //             type: 'bar',
        //             data: [220, 182, 191, 234]
        //         },
        //         {
        //             name: '爱电影',
        //             type: 'bar',
        //             data: [150, 232, 201, 154]
        //         },
        //         {
        //             name: '爱游泳',
        //             type: 'bar',
        //             data: [262, 118, 364, 426],
        //         },

        //     ]
        // };


        // // 使用刚指定的配置项和数据显示图表。
        // myChart2.setOption(option2);
    </script>
</body>

</html>